<template>
  <yk-table>
    <yk-table-column property="name" label="标签名称"></yk-table-column>
    <yk-table-column property="moment" label="创建时间"></yk-table-column>
    <yk-table-column property="manage" label="操作" align="right"></yk-table-column>
    <template #tbody>
      <tr v-for="(item, index) in label" :key="index" class="yk-table__row">
        <td class="yk-table__cell">
          {{ item.label_name }}
        </td>
        <td class="yk-table__cell">
          {{ moment(item.moment!) }}
        </td>
        <td class="yk-table__cell text-right">
          <yk-text type="primary" style="cursor: pointer" @click="deleteLabel(item.id)">删除</yk-text>
        </td>
      </tr>
    </template>
  </yk-table>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { LabelData } from '@/utils/interface';
import { moment } from '@/utils/moment';



type labelProps = {
  label: LabelData[]
}

const props = withDefaults(defineProps<labelProps>(), {
})


// 删除标签
const emits = defineEmits(['deleteLabel']);
const deleteLabel = async (e: number | string) => {
  emits('deleteLabel', e)
  labelData.value = labelData.value.filter((obj: { id: number | string }) => {
    return obj.id !== e
  })
}

// 当前标签
const labelData = ref<LabelData[]>([])

watch(() => props.label, (e) => {
  labelData.value = [...e];

}, { immediate: true })
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #3a7bd5;
@primary-light: rgba(58, 123, 213, 0.08);
@primary-hover: rgba(58, 123, 213, 0.15);
@danger-color: #e74c3c;
@danger-light: rgba(231, 76, 60, 0.08);
@text-color: #2c3e50;
@text-light: #5e6c84;
@bg-color: #ffffff;
@bg-light: #f9fafc;
@bg-hover: #f4f7fc;
@border-color: #edf0f5;
@transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);

// 表格样式增强
:deep(.yk-table) {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

  // 表头样式
  .yk-table__header {
    background: @bg-light;

    th {
      font-weight: 600;
      color: @text-color;
      padding: 14px 16px;
      font-size: 15px;
      border-bottom: 2px solid lighten(@border-color, 2%);
    }
  }

  // 表格行样式
  .yk-table__row {
    transition: @transition;

    &:hover {
      background-color: @bg-hover;
    }

    &:last-child {
      .yk-table__cell {
        border-bottom: none;
      }
    }
  }

  // 单元格样式
  .yk-table__cell {
    padding: 12px 16px;
    color: @text-light;
    border-bottom: 1px solid lighten(@border-color, 3%);
    font-size: 14px;

    // 操作列样式
    &.text-right {
      padding-right: 20px;
    }
  }

  // 删除按钮样式
  .yk-text[type="primary"] {
    position: relative;
    padding: 6px 12px;
    border-radius: 6px;
    color: @danger-color;
    transition: @transition;

    &:hover {
      background-color: @danger-light;
      color: darken(@danger-color, 8%);
    }

    &::before {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 12px;
      right: 12px;
      height: 1px;
      background-color: currentColor;
      opacity: 0;
      transform: scaleX(0.7);
      transition: @transition;
    }

    &:hover::before {
      opacity: 0.5;
      transform: scaleX(1);
    }
  }
}

// 响应式调整
@media (max-width: 768px) {

  // 在移动端转为卡片视图
  .label-cards-mobile {
    display: block;
  }

  :deep(.yk-table) {
    box-shadow: none;

    // 隐藏表头
    thead {
      display: none;
    }

    // 重置表格为块级元素
    table,
    tbody,
    tr {
      display: block;
      width: 100%;
    }

    // 转换行为卡片
    .yk-table__row {
      margin-bottom: 16px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      background-color: @bg-color;
      overflow: hidden;
      border: 1px solid @border-color;

      &:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
      }
    }

    // 转换单元格样式
    .yk-table__cell {
      display: flex;
      padding: 12px 14px;
      text-align: left !important;
      border-bottom: 1px solid lighten(@border-color, 3%);

      // 添加列标题
      &:nth-child(1)::before {
        content: '标签名称：';
        font-weight: 500;
        color: @text-color;
        margin-right: 8px;
        min-width: 72px;
      }

      &:nth-child(2)::before {
        content: '创建时间：';
        font-weight: 500;
        color: @text-color;
        margin-right: 8px;
        min-width: 72px;
      }

      &:nth-child(3) {
        justify-content: flex-end;
        background-color: @bg-light;
        border-bottom: none;

        .yk-text[type="primary"] {
          padding: 8px 16px;
          font-size: 14px;

          &::before {
            bottom: 6px;
          }
        }
      }
    }
  }
}

@media (max-width: 576px) {
  :deep(.yk-table) {
    .yk-table__row {
      margin-bottom: 12px;
      border-radius: 8px;
    }

    .yk-table__cell {
      padding: 10px 12px;
      font-size: 13px;

      &:nth-child(1)::before,
      &:nth-child(2)::before {
        min-width: 68px;
        font-size: 13px;
      }

      &:nth-child(3) {
        .yk-text[type="primary"] {
          padding: 6px 14px;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
